<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>高度塌陷</title>
    <style>
        *{margin: 0;padding: 0;list-style-type: none;}
        .clearfix:after{
            content:'';
            diaplay:block;
            clear:both;
        }
        ul{
            width: 350px;
            height: 100px;
            /* 浮动会脱离文档流，父元素没有高度就检测不出高度的存在，从而出现高度塌陷的问题 */
            /* 解决方式
                1.设置父元素
                2.设置幽灵元素 clear
                3.利用伪元素清除浮动
                    固定写法：
                    .clearfix:after{
                        content:'';
                        diaplay:block;
                        clear:both;
                    }
                4.让父元素成为一个BFC容器
                    创建BFC容器以后，可以让浮动元素能检测到从而撑开高度内容
            */
            margin: 50px;
            border: 1px solid aqua;
        }
        ul li{
            float: left;
            width: 100px;
            height: 100px;
            box-sizing: border-box;
            background-color: skyblue;
        }
        .item1{
            background-color: rgba(135, 235, 217, 0.562);
        }
        .item2{
            background-color: rgb(135, 140, 235);
        }
        .item3{
            background-color: rgb(135, 150, 235);
        }
        /* clear 清除浮动
            可选值
            left 清除左浮动
            right 清除右浮动
            both 清除两方浮动
        */
        .clear{
            width: 0px;
            height: 0px;
            border: 1px solid red;
            clear: both;
            background-color: blue;
        }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li class="item1">1</li>
        <li class="itme2">2</li>
        <li class="item3">3</li>
        <!-- 幽灵元素 -->
        <li class="clear"></li>
    </ul>
</body>
</html>